<template>
  <div class="container">
    <div class="actionBtn" ref="actionBtnRef">
      <el-button type="primary" @click="handleClick(1)">导入学员</el-button>
      <el-button @click="handleClick(2)" type="danger" :disabled="!selectArr.length">删除学员</el-button>
      <el-button @click="handleClick(3)">导入模板下载</el-button>
      <el-button @click="handleClick(4)" :disabled="!selectArr.length">导出学员</el-button>
    </div>

    <el-table :data="tableData" :max-height="tableMaxHeight" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="mobile" label="联系方式" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="identityCard" label="身份证号" />
      <el-table-column prop="enterprise" label="所在企业名称" />
      <el-table-column prop="education" label="最高学历" />
    </el-table>

    <!-- 成绩导入 -->
    <input type="file" @change="handleFileImport" v-show="false" ref="fileClick" />
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["info"]);
let tableData = ref([]);
let selectArr = ref([]);
let actionBtnHeight = ref(0);
let selectedRow = ref([]);

let tableMaxHeight = computed(() => {
  let hei =
    window.innerHeight -
    84 -
    counter.pageHeight -
    110 -
    actionBtnHeight.value -
    counter.classCardHeight;
  return `${hei}px`;
});

onMounted(() => {
  actionBtnHeight.value = proxy.$refs.actionBtnRef.offsetHeight;
  console.log("actionBtnHeight", actionBtnHeight.value);
});

function handleSelectionChange(e) {
  selectArr.value = [];
  selectedRow.value = e;
  e.forEach((element) => {
    selectArr.value.push(element._id);
  });
}

async function handleClick(type) {
  switch (type) {
    case 1:
      proxy.$refs.fileClick.click();
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips("确认移出班级？");
      if (!resp) return;
      await proxy.$apis.classToC({
        type: "studentDel",
        data: selectArr.value,
      });
      proxy.$utils.showToast("移出成功");
      getInfo();
      break;
    case 3:
      counter.downLoadTemplate("offline-student-template", "ToC学员导入模板");
      break;
    case 4:
      exportStudent();
      break;
    default:
      break;
  }
}

async function getInfo() {
  if (!props.info._id) return;
  tableData.value = await proxy.$apis.classToC({
    type: "studentsList",
    data: { classId: props.info._id },
  });
  console.log("班级学员", tableData.value);
}

async function exportStudent() {
  let list = [];
  tableData.value.forEach((element) => {
    list.push({
      姓名: element.name,
      联系方式: element.mobile,
      性别: element.sex,
      身份证号: element.identityCard,
      所在企业名称: element.enterprise,
      最高学历: element.education,
    });
  });
  let cols = []; //设置表头样式
  list.forEach((element) => {
    cols.push({ wch: 20 });
  });
  let query = { jsonData: list, cols };
  await proxy.$utils.exportToExcel(query, "班级学员导出");
}

async function handleFileImport(event) {
  try {
    const files = event.target.files;

    let file = files[0];
    let resp = await proxy.$utils.fileToJson(file);
    let list = [];
    for (let index = 0; index < resp.length; index++) {
      const element = resp[index];
      if (index) {
        list.push({
          classId: props.info._id,
          name: element[1],
          mobile: element[2],
          sex: element[3],
          identityCard: element[4],
          enterprise: element[5],
          education: element[6],
        });
      }
    }
    await proxy.$apis.classToC({
      type: "studentImport",
      data: list,
    });
    proxy.$utils.showToast("导入成功");
    getInfo();
  } catch (error) {
  } finally {
    event.target.value = "";
  }
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.actionBtn {
  margin-bottom: 15px;
}
</style>




